<template>
  <div class="tablePage">
    <el-pagination
      small
      background
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="Number(page)"
      :pager-count="5"
      :page-size="pageSize"
      layout="total, prev, pager, next"
      :total="total"
    >
    </el-pagination>
  </div>
</template>

<script>
export default {
  props: ["page", "pageSize", "total"],
  methods: {
    // 当每页的条数发生变化时触发
    handleSizeChange(size) {
      this.$emit("pageSizeChange", size);
    },
    // 分页触发
    handleCurrentChange(current) {
      this.$emit("currentChange", current);
    },
  },
};
</script>

<style lang="less" scoped>
/deep/.el-pagination.is-background .el-pager li:not(.disabled).active {
  background-color: #0063c7 !important;
  color: #fff;
}
</style>
